マテリアルデザインに魂を売った男の末路 基本編２
3. 性質
基本的なマテリアルサーフェスは、1dpの厚さの不透明な白色で、影を投じています。
マテリアルデザインのすべてのUIは、このサーフェスをベースにカスタマイズしたものです。
動作
マテリアルサーフェスはあらゆる振る舞いを持つことができます。
Rigid Surface: 全てのやりとりに置いて同じサイズを維持する。
Stretchable Surfaces: 1つまたは複数の角に沿ってサイズ制限まで拡大または縮小し、次にRigid Surfaceとして動作します。
Pannable Surfaces: 相互作用を通して同じサイズを維持する。コンテンツの制限に達するまで、領域内をスクロールすると追加のコンテンツを表示できます。この限界に達すると、それらはそのスクロール方向のRigid Surfaceとして振る舞います。
https://material.io/design/assets/0B6xUSjjSulxca1NWSW91bXRRaDQ/materialattributes-static-1b.png
追加のコンテンツに対応するために、1つまたは複数の軸に沿ってマテリアルサーフェスのサイズを拡張できる
https://material.io/design/assets/19e8l8UXWqC4n_7eMT0d8_YD6CvAwDX-M/materialattributes-stretch-1.mp4
サーフェスの位置は固定されていても構いませんが、その内部コンテンツはサーフェス全体をスクロールできる
https://material.io/design/assets/1JCxHxRkVWHO_OqZSLar9bIaah5p4yJAk/materialattributes-pan.mp4
複合サーフェス
サーフェスは、さまざまな種類の動作を表示する領域に分割できます。
1. 単一のサーフェスには、埋め込みMapなどの複数のPannable Surfaceを含めることができます。
2. スクロール可能なリストから独立して表示する
https://material.io/design/assets/12LJku-D8qyXCzzx9tH2PVjx73E145zRo/materialattributes-constructingsurfaces-1.mp4
カードは、他のカードの内容とは独立してスクロールする領域を表示するために伸縮することができます。
https://material.io/design/assets/1lA44inCPDrT5UShoK5fQYynz-KISRSs6/materialattributes-constructingsurfaces-2.mp4
伸縮性サーフェス
伸縮性サーフェスは、表示領域が限界に達する前に引き伸ばすことができ、その時点でRigid Surfaceの特性をもつ。サーフェスは、縦方向、横方向、または両方向に伸縮できます。
一般に、サーフェスはユーザの行った操作に対して、サーフェスを一方向に伸ばして反応できます。
たとえば、「詳細」をタップすると、カードが縦に伸びて追加のコンテンツが表示するなど。
https://material.io/design/assets/1SdOX6Lmt-WHkMKkQ0ySDQmucI7X1oK8X/surfaces-stretchvert.mp4
https://material.io/design/assets/16aoHYwbnA-hU5bjAUYFWHscqArnDczz9/surfaces-stretchhoriz.mp4https://material.io/design/assets/1TMUunFfJc9gZHZGevKpY7l6P142KIC-7/surfaces-stretchverthoriz.mp4
サーフェスの位置と移動
サーフェスは、x軸とy軸の固定された位置に留まるか、任意の方向に移動可能です。
サーフェスの移動は、単一軸に限定することも、一度に1つの軸に沿って移動させることも、同時に両方の軸に沿って移動させることもできます。
1. 一番上のAppBarのようにサーフェスは固定された位置にとどまることができます。
2. サーフェスはCardコレクション中の固定された位置に留まり、Cardコレクションは縦方向にのみスクロールする
https://material.io/design/assets/1NXMLcGNl9IkAxArhrBJ2Fmt25y-xONWG/surfaces-movement-vert.mp4
1, 2. サーフェスは任意の方向に移動できますが、移動する方向は一度に1つの軸に限定することができます。
https://material.io/design/assets/1aGew2FIQkfzmPmUNO1kDcmuan4nPPuG4/surfaces-movement-horizvert.mp4
サーフェスは任意の方向に移動できる
https://material.io/design/assets/17P0eYiNCieKok31ccVmFk8fMVN57wSwo/surfaces-movement-cards.mp4
サーフェスは互いに独立して動くことができ、自分以外の他のサーフェスの動きに影響を与えることができます。
https://material.io/design/assets/1vsdOr2TZXmYXwVpbNhMlU6Mu9SiWCuTt/surfaces-movement-independent.mp4
依存関係は、あるサーフェスが拡大すると周囲のサーフェスが押しのけられるように移動したり、視差を移動するサーフェス間の移動の割合など、さまざまな力学に基づいています。
https://material.io/design/assets/1g8_mzj8_gE8xHyFkFAmwrH-AAkbtlShs/surfaces-movement-dependent.mp4
サーフェスの不透明度
マテリアルサーフェスは、透明、半透明、または不透明にすることができます。
警告
1. 透明または半透明のテキストには、判読性を維持するために背景処理が必要な場合があります。
https://material.io/design/assets/1dL9hqIWVh7qKrT9MaZOJDArm6mRNtHFS/materialattributes-surfaceopacity-do.mp4
タブー
1. 透明なサーフェスを使用しないでください。透明なサーフェスは不透明でないため、コンテンツが表示されるサーフェスを特定することが困難です。このトップAppバーは透明です。Appバーやその背後のサーフェスのテキストが混同してしまいます。
https://material.io/design/assets/17k7OapqM62VIbYXPfjpQBJZlVZj2_Lii/materialattributes-surfaceopacity-dont.mp4
スクリム
スクリムとは米国で用いられる舞台の幕のこと、もしくは繊維の種類。マテリアルデザイン では一時的に現れるポップアップやモーダルなどを指す。
スクリムは、サーフェス上のコンテンツをあまり目立たないようにするために、マテリアルサーフェスに適用できる一時的な処理です。彼らは画面の他の部分にユーザーの注意を向けさせるのに有効です。
スクリムは、以下を含む様々な方法で適用することができます
サーフェスとその内容を暗くしたり明るくしたりする
サーフェスとその内容の不透明度を下げる
一度に画面上の複数のサーフェスにスクリムを表示できます。スクリムは、最前面でも背景でも、どの高度でも表示できます。
https://material.io/design/assets/1mkiPGXrONwm7bwBGbBImLbE7wYfJqfsV/surfaces-attributes-scrim-back.png https://material.io/design/assets/1XaJOY2td2t4vePm-2WiXcnNUW-mI39dQ/surfaces-attributes-scrim-front.png
サーフェスの原則は以上で終了です！！
なんども同じような話が出てきてしつこい！と思った人もいるでしょうがサーフェスはマテリアルデザインの中心なので、サーフェスの原則は魂に刻んでおいてください！！
まだまだマテリアルデザインの原則の話は終わりません！